<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="js/index.js"></script>
</head>
<body>
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;">

</canvas>
<button dir="2">上</button>
<button dir="6">下</button>
<button dir="0">左</button>
<button dir="4">右</button>
<button dir="1">西北</button>
<button dir="3">东北</button>
<button dir="5">东南</button>
<button dir="7">西南</button>

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");

    var girl = new Girl({
        imgSrc:"girl.png",
        clipW:0,
        clipH:0,
        x:256,
        y:256,
        width:256,
        height:256,
        duration:400,
        dir:0
    });

    girl.render(ctx);

    var buttons = document.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {

            girl.changeDir(this.getAttribute('dir'));
        }
    }

</script>
</body>
</html>